<template>
  <div class="box">
    <el-row>
      <el-col :span="10" class="box1">
        <h2 style="color:red;font-size:30px">{{data.title}}</h2>
        <img :src="data.images.large.replace(/img7/,'img3')" alt />
        <div class="zi1">
          <p>类型：{{data.genres.join()}}</p>
          <p>导演：{{data.directors[0].name}}</p>
          <p>上映于：{{data.year}}</p>
          <p>豆瓣评分：{{data.rating.average}}</p>
        </div>
        <div class="zi2">
          <h2>主演：</h2>
          <p v-for="(item,i) in data.casts" :key="i">{{item.name}}</p>
          <hr />
          <span>简介：暂无介绍</span>
        </div>
      </el-col>
      <el-col :span="10" class="box2">
        <div class="hezi">
          <el-form
            :model="form"
            :rules="rules"
            ref="myform"
            label-width="100px"
            class="myform"
            label-position="top"
          >
            <el-form-item label="评论标题" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="评论内容" prop="content">
              <el-input type="textarea" v-model="form.content"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="info" class="width100" @click="addping">添加</el-button>
              <el-button type="danger" class="width100" @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getmovieone,addpinglun } from "@/api";
export default {
  data() {
    return {
      username: sessionStorage.getItem("username"),
      form: {},
      rules: {
        // 表单校验
        title: [
          { required: true, message: "请务必输入评论标题", trigger: "blur" },
        ],
        content: [
          { required: true, message: "请务必输入评论内容", trigger: "blur" },
        ],
      },
      data: [],
    };
  },
  mounted() {
    // console.log(this.$route.params.id);//拿到电影id
    getmovieone({ id: this.$route.params.id }).then((res) => {
      this.data = res.result;
    });
    console.log(this.username);
  },
  methods: {
    resetForm() {
      this.$refs.myform.resetFields();
    },
    addping() {
      this.$refs.myform.validate((valid) => {
        if (valid) {
          this.form.author = this.username;
          this.form.id = this.$route.params.id;
          console.log(this.form);
          addpinglun(this.form)
          .then(res=>{
              this.$router.push({name:"pinglun"})
          })
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 580px;
  background: rgba(196, 191, 191, 0.3);
  .box1 {
    margin: 20px 20px 0 60px;
    height: 540px;
    padding: 20px 50px;
    border: 3px solid brown;
    border-radius: 20px;
    background: url(../../assets/images/jj.jpg) no-repeat;
    background-size: 100% 100%;
    position: relative;
    .zi1 {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      > p {
        width: 50%;
        font-size: 20px;
      }
    }
    .zi2 {
      position: absolute;
      top: 150px;
      left: 380px;
      font-size: 20px;
      color: cadetblue;
    }
  }
  .box2 {
    margin: 20px 20px 0 50px;
    height: 540px;
    border: 3px solid brown;
    background: url(../../assets/images/timg8.jpg) no-repeat;
    background-size: 100% 100%;
  }
}
::v-deep .el-form {
  width: 300px;
  margin: 50px auto;
  .el-form-item__label {
    font-size: 20px;
    color: black;
  }
  .el-textarea__inner {
    min-height: 120px !important;
  }
}
</style>